<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>From Page Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../bootstrap.min.css" />
<link rel="stylesheet" href="../dist/bootstrap-table.css" />
<script type="text/javascript" src="../../jquery/jquery.min.js"></script>
<script type="text/javascript" src="../../popper.min.js"></script>
<script type="text/javascript" src="../../bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/bootstrap-table.min.js"></script>
</head>
<body>

<div id="toolbar">
    <button class="btn btn-primary"><i class="fa fa-plus fa-1"></i>&nbsp;新增</button>
    <button class="btn btn-info"><i class="fa fa-edit fa-1"></i>&nbsp;修改</button>
    <button class="btn btn-danger"><i class="fa fa-times fa-1"></i>&nbsp;删除</button>
</div>
<table id="data-table"></table>

<script type="text/javascript">
$("#data-table").bootstrapTable({
    showColumns: true,
    showRefresh: true,
    showToggle: true,
    showFullscreen: true,
    clickToSelect: true,
    toolbar: "#toolbar",
    url: "page-server.json",
    icons: {
        refresh: "fa-refresh",
        toggleOff: 'fa-toggle-off',
        toggleOn: 'fa-toggle-on',
        columns: 'fa-th-list',
        fullscreen: 'fa-arrows-alt'
    },
    pagination: true,
    pageNumber: 1,
    pageSize: 10,
    pageList: [10,20,50,'All'],
    sidePagination: "server",
    // queryParamsType: '',//分页参数传递方式
    totalField: "total",
    dataField: "rows",
    /*
     * limit 传递 {"search":"","order":"asc","offset":0,"limit":10}
     * '' 传递 {"searchText":"","sortOrder":"asc","pageSize":10,"pageNumber":1}
     */
    columns: [
        {radio: true},
        {field: "id" , title: "ID" , align: "center", sortable: true},
        {field: "name" , title: "姓名" , align: "center", sortable: true},
        {field: "price" , title: "金额" , sortable: true}
    ],
    responseHandler: function (result) {
        var options = $("#data-table").bootstrapTable("getOptions");
        var pageNumber = options.pageNumber;
        var pageSize = options.pageSize;
        var rows = result.rows;
        for(var i=0 ; i < rows.length ; i++){
            var item = rows[i];
            var id = (pageNumber - 1) * pageSize + (i + 1);
            if(id > result.total){
                rows.splice(i , pageSize - i);
                break;
            }
            item.id = id;
            item.name = item.name + item.id;
        }
        return result;
    }
});
</script>
</body>
</html>